<template>
  <view class="wrap">
    <view class="list" v-if="list.length > 0">
      <view class="item" v-for="(item,index) in list" :key="index">
        <view class="title">{{item.name}}</view>
        <view class="dec">{{item.content}}</view>
        <view class="line"></view>
        <view class="time">{{$u.timeFormat(item.createTime, 'yyyy/mm/dd hh:MM:ss')}}</view>
      </view>
    </view>
    <u-empty
        mode="order"
        textSize="36"
        iconSize="160"
        text="暂无消息"
        v-if="list.length === 0"
    >
    </u-empty>
    <u-loadmore :status="pageObj.status" :nomoreText="null" fontSize="28" iconSize="32"/>
  </view>
</template>
<script>
import {Api} from "../../service/api";

export default {
  name: "msg",
  data() {
    return {
      list: [],
      pageObj: {
        pageSize: 9,
        pageNum: 0,
        status: 'loading'
      },
    }
  },
  onReachBottom() {
    this.getList()
  },
  onLoad() {
    this.getList()
  },
  methods: {
    async getList() {
      if(this.pageObj.status === 'nomore') return
      this.pageObj.status = 'loading'
      Api.notifyPage({
        pageNo: ++ this.pageObj.pageNum,
        pageSize: this.pageObj.pageSize,
      }).then(res=>{
        this.list = this.list.concat(res.data.list)
        if(this.list.length < res.data.total)  this.pageObj.status = 'loadmore'
        else this.pageObj.status = 'nomore'
      })
    }
  }
}
</script>

<style>
page{
  background-color: #F6F6F6;
}
</style>

<style scoped lang="scss">
.wrap{
  padding: 40rpx 20rpx 20rpx;

  .list{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20rpx;

    .item{
      display: flex;
      flex-direction: column;
      gap: 15rpx;
      border-radius: 20rpx;
      background-color: #fff;
      padding: 15rpx;
      width: 95%;

      .title{
        color: #2A2A2A;
        font-size: 32rpx;
        font-weight: 700;
      }

      .line{
        height: 3rpx;
        background-color: #EBEBEB;
        width: 100%;
      }

      .dec{
        color: #646569;
        font-size: 24rpx;
        font-weight: 400;
      }

      .time{
        color: #646569;
        font-size: 24rpx;
        font-weight: 400;
      }
    }
  }
}


</style>
